import React from 'react';
import { useCollapse } from '@/hooks';
import { Collapse } from '@/molecules';
import { Form } from 'antd';
import { BottomAction, AssessTask, AssessAbility, AssessAbilityDesc } from '../containers';
import { useAssessSetting } from '../hooks';

const { Panel } = Collapse;

function AssessTutorW(props) {
    const { form, data = {} } = props;

    const params = React.useMemo(() => {
        const { resourceRelation = {}, assessSummary = 0, project, ...values } = form.getFieldsValue();
        const { uploadResourceFile } = resourceRelation;
        return {
            assess: {
                resourceRelation: uploadResourceFile ? [uploadResourceFile] : [],
                assessAbility: {
                    project
                },
                assessSummary: assessSummary[0],
                ...values
            }
        };
    }, [form]);

    const { activeKey, onChange, openAll } = useCollapse(['1', '2'], []);
    const { w = {} } = useAssessSetting(data);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                {w.showTask && (
                    <Panel header="任务情况" key="1">
                        <AssessTask data={data} />
                    </Panel>
                )}
                {w.showAssess && (
                    <Panel header="能力评估" key="2">
                        <AssessAbilityDesc data={data} />
                        <AssessAbility form={form} data={data} />
                    </Panel>
                )}
            </Collapse>
            <BottomAction openAll={openAll} data={data} params={params} form={form} />
        </div>
    );
}

export default Form.create({})(AssessTutorW);
